{% extends 'base.html' %}
{% block content %}

<ul class="breadcrumb">
  <li><a href="{% url 'list_assets_view' %}">assets</a></li>
  <li><a href="/assets/owners/list">owners</a></li>
  <li class="active">list</li>
</ul>

<div class="container">
  <!-- <a href="/assets/owners/add">+ Add a new asset owner</a><br/> -->
  <table class="table table-hover" data-toggle="table" data-sort-name="value" data-sort-order="desc">
    <!-- <h2>Asset Owners</h2> -->
    <thead>
      <tr>
        <!-- <th data-field="name">Name</th> -->
        <th data-field="name">Name</th>
        <th data-field="nb_assets"># Assets</th>
        <th data-field="nb_contacts"># Contacts</th>
        <th data-field="nb_documents"># Docs</th>
        <th data-field="updated_at">Last update</th>
        <th data-field="actions">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for owner in owners %}
      <tr>
        <td><a href="/assets/owners/details/{{ owner.id }}" class="text-primary">{{ owner.name }}</a></td>
        <td>{{ owner.nb_assets }}</td>
        <td>{{ owner.nb_contacts }}</td>
        <td>{{ owner.nb_documents }}</td>
        <td>{{ owner.updated_at|date:"Y/m/d\-H:i:s" }}</td>
        <td>
          <button type="button" class="btn btn-default btn-xs" aria-haspopup="true" aria-expanded="false" onclick="location.href='/assets/owners/details/{{ owner.id }}'">
            <span class="glyphicon glyphicon-edit"></span></button>
          <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#modal-delete-owner"
             owner-id="{{ owner.id }}" owner-name="{{ owner.name }} / {{ owner.title }}">
             <span class="glyphicon glyphicon-remove"></span></button>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  <a href="/assets/owners/add">+ Add a new asset owner</a><br/>

  <div class="notifications">
    {% if messages %}
    <ul class="messages">
        {% for message in messages %}
        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
    </div>
  </div>


  <!-- Delete Owner modal -->
  <div class="modal fade" id="modal-delete-owner" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header bg-primary">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Delete Asset Owner</h4>
        </div>

        <!-- Modal Body -->
        <div class="modal-body">
          <div id="delete-owner">
            <!-- Content -->
          </div>
          Confirm Deleting?
          <p class="text-danger">Warning ! All contacts and documents will be deleted too.</p>
          <button type="button" class="btn btn-xs btn-warning btn-delete-owner" data-dismiss="modal">Yes</button>
          <button type="button" class="btn btn-xs btn-primary" data-dismiss="modal">No</button>
        </div>
      </div>
    </div>
  </div>


<script>
  $(function() {
    // jQuery

    // Delete owner modal
    $("#modal-delete-owner").on('show.bs.modal', function (e) {
      owner_id = e.relatedTarget.getAttribute('owner-id');
      owner_name = e.relatedTarget.getAttribute('owner-name');
      $("div#delete-owner").attr('owner-id', owner_id);
      $("div#delete-owner").html("Owner Name: <b>"+owner_name+"</b><br/><br/>");
    });
    $("button.btn-delete-owner").on('click', function (e) {
      owner_id = $("div#delete-owner").attr('owner-id');
      delete_owner_url = "/assets/owners/delete/"+owner_id;
      var request = $.ajax({
        url: delete_owner_url,
        method: "POST",
        headers: {"X-CSRFToken": "{{ csrf_token }}"},
        success: function(){
          location.reload();
        }
      });
    });

  });
</script>

{% endblock %}
